<template>
	<view class="musicPlayer">
		<!-- 动画 -->
		<view class="musicPlayerimage" :class="pausedText ? 'stop' : 'play'">
			<image :src="audioList[pausedNum].img" mode=""></image>
		</view>
		<view class="title">
			<view class="titleName">
				{{audioList[pausedNum].name}}
			</view>
			<view class="titleAuthor">
				{{audioList[pausedNum].author}}
			</view>
		</view>
		<view class="set">
			<view class="volume">
				<view class="volumejia" @click="jia" hover-class="active">
					+
				</view>
				<view class="volumejian" @click="jian"  hover-class="active">
					-
				</view>
			</view>
			<view class="cmd">
				<!-- 进度条 -->
				<cmd-progress class="progress" :percent="downloadProgress" :show-info="false" :strokeWidth="20" strokeShape="round" stroke-color="linear-gradient(to right, #f8f71c, #f5db58,#dffc8d)"></cmd-progress>
				<view class="text">
					<text>{{time || '0:00'}}</text>
					<text>{{playtime || '0:00'}}</text>
				</view>
			</view>
			<!-- 控制按钮 -->
			<view class="box">
				<view class="" @click="last" hover-class="c">
					上一首
				</view>
				<view class="" @click="play">
					{{pausedText==1 ? '播放':'暂停'}}
				</view>
				<view class="" @click="next" hover-class="c">
					下一首
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import { mapState, mapMutations} from 'vuex'
	let innerAudioContext = ''; //音频
	let t = ''
	export default{
		components:{
			cmdProgress
		},
		computed:{...mapState(['recordTime'])},
		data(){
			return{
				audioList: [
					{
						name: '少年',
						author: '靓仔',
						src: 'http://120.79.191.222/home/fgy/mp3/少年.mp3',
						img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547631130547&di=076c9275ce160baa2ff5cb66eed4ad53&imgtype=0&src=http%3A%2F%2Fwww.mixtapetorrent.com%2Fsystem%2Ffiles%2Ffollowmernb.jpg'
					},
					{
						name: '半壶沙',
						author: '岑军',
						src: 'http://120.79.191.222/home/fgy/mp3/半壶沙.mp3',
						img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547630762297&di=2c3317bf38f107287414b1b0cd33f0e5&imgtype=0&src=http%3A%2F%2Fsingerimg.kugou.com%2Fuploadpic%2Fpass%2Fsofthead%2F400%2F20140829%2F20140829161553861786.jpg'
					}
				],
				pausedText:1,// 播放状态
				time:"",// 音频时长
				pausedNum:0,// 当前歌曲的索引
				seek:'',// 指定快进时间
				songProgressTime:0,// 进度
				volume:0.4,// 音量
				playtime:'0:00',// 正在播放的时间
				downloadProgress:0,// 进度条

				
			}
		},
		// mounted() {
		// 	this.houtaiplay()
		// },
		onHide(){
			// 不后台播放
			// this.houtai()  
		},
		onShow() {
			// 不后台播放
			this.houtaiplay()
		},
		onUnload(){
			//不后台播放
			this.houtai()
		},
		methods:{
			...mapMutations(['toRecordTime']),
			autio(i){
				if(innerAudioContext){ // 如果存在销毁
					innerAudioContext.destroy(); 
					innerAudioContext = ''
				}
				this.songProgressTime = 0
				innerAudioContext = uni.createInnerAudioContext()
				let audioList =  this.audioList  // 列表
				innerAudioContext.src = audioList[i].src;  // 播放路径
				innerAudioContext.autoplay = true;  // 自动播放
				innerAudioContext.volume = this.volume  // 音量
				let duration = ''
				innerAudioContext.onCanplay(()=>{
					duration =  innerAudioContext.duration
					let hour = parseInt(duration / 60 / 60);
					let minute = parseInt(duration / 60) % 60;
					let second = parseInt(duration % 60);
					if(second < 10){
						this.time = (hour || '') +  minute + ':' + '0' + second
					}else{
						this.time = (hour || '') +  minute + ':' + second
					}
				})
				
				 // 播放
				innerAudioContext.onPlay(() => { 
					this.pausedText = 0
					t = setInterval(()=>{
						this.songProgressTime ++
						// 进度条
						this.downloadProgress = (((this.songProgressTime/duration) * 100).toFixed(1) * 1)
						// 计算时间
						let hour = parseInt(this.songProgressTime / 60 / 60);
						let minute = parseInt(this.songProgressTime / 60) % 60;
						let second = parseInt(this.songProgressTime % 60);
						if(second < 10){
							this.playtime = (hour || '') +  minute + ':' + '0' + second
						}else{
							this.playtime = (hour || '') +  minute + ':' + second
						}
						// 
						if(this.songProgressTime >= duration){
							this.playtime = this.time
							clearInterval(t)
						}
					},1000)
				});
				// 暂停
				innerAudioContext.onPause(() => {  
					this.pausedText = 1
					clearInterval(t)
				});
				// 结束
				innerAudioContext.onEnded(() => { 
					this.next();
				});
				// 报错
				innerAudioContext.onError((res) => {
				  console.log(res);
				});
				
			},
			play(){
				const paused = innerAudioContext.paused  // 当前播放状态
				if(paused){
					innerAudioContext.play();
				}else{
					innerAudioContext.pause();
				}
			},
			// 上一步
			last(){
				clearInterval(t)
				let audioList = this.audioList
				this.pausedNum --
				if(this.pausedNum >= 0){
					this.autio(this.pausedNum)
				}else{
					this.pausedNum = audioList.length - 1
					this.autio(this.pausedNum)
				}
			},
			// 下一步
			next(){
				clearInterval(t)
				let audioList = this.audioList
				this.pausedNum ++
				if(this.pausedNum > audioList.length - 1){
					this.pausedNum = 0
					this.autio(this.pausedNum)
				}else{
					this.autio(this.pausedNum)
				}
			},
			jia(){
				if(this.volume >= 1){
					this.$toast("已经是最大音量了")
					return
				}
				this.volume = (((this.volume * 10) + 1) / 10)
				let v = null
				v = (this.volume * 10).toFixed(0)
				this.$toast("当前音量" + v)
			},
			// 高波
			// 经测试volume 在APP端不生效 H5端测试正常
			jian(){
				if(this.volume <= 0){
					this.$toast("已经是最小音量了")
					return
				}
				this.volume = (((this.volume * 10) - 1) / 10)
				let v = null
				v = (this.volume * 10).toFixed(0)
				this.$toast("当前音量" + v)
			},
			// 后台
			houtai(){
				clearInterval(t)
				let r = {
					songProgressTime : this.songProgressTime,
					volume : this.volume,
					downloadProgress : this.downloadProgress,
					pausedNum:this.pausedNum
				}
				this.toRecordTime(r)
				this.pausedText = 1
				innerAudioContext.destroy()
			},
			// 播放
			houtaiplay(){
				let recordTime = this.recordTime
				console.log(recordTime)
				let r = JSON.stringify(recordTime)
				if(r.length > 2){
					this.autio(recordTime.pausedNum)
					let hour = parseInt(recordTime.songProgressTime / 60 / 60);
					let minute = parseInt(recordTime.songProgressTime / 60) % 60;
					let second = parseInt(recordTime.songProgressTime % 60);
					if(second < 10){
						this.time = (hour || '') +  minute + ':' + '0' + second
					}else{
						this.time = (hour || '') +  minute + ':' + second
					}
					this.volume = recordTime.volume
					this.downloadProgress = recordTime.downloadProgress
					innerAudioContext.seek = recordTime.songProgressTime
					// 高波
					// 经测试seek 在APP端不生效 H5端测试正常
					console.log(innerAudioContext.seek)
					this.pausedNum = recordTime.pausedNum
					this.songProgressTime = recordTime.songProgressTime
				}else{
					this.autio(0)
				}
			}
		}
	}
</script>

<style scoped>
	.musicPlayer{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:linear-gradient(to top, #7ded17,#a8d835,#45e27d);
	}
	.set{
		
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.box{
		width: 100%;
		display: flex;
		justify-content: center;
		height: 100rpx;
		background: #39B54A;
	}
	.box view{
		color: #FFFFFF;
		padding: 10rpx 20rpx;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.box view:nth-child(2){
		font-size: 40rpx;
	}
	.text{
		display: flex;
		justify-content: space-between;
		padding:  0 40rpx;
		color: #FFFFFF;
	}
	.cmd{
		margin-bottom: 30rpx;
	}
	.cmd >>> .cmd-progress .cmd-progress-outer .cmd-progress-inner view { 
		height: 16rpx !important;
	}   
	.musicPlayerimage{
		width: 400rpx;
		height: 400rpx;
		margin: 80rpx auto;
		animation: plays 60s linear infinite;
	}
	.musicPlayerimage image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* border-radius: 30rpx; */
	}
	.title{
		color: #FFFFFF;
		padding: 0 40rpx;
		text-align: center;
	}
	.titleAuthor{
		font-size: 28rpx;
	}
	.titleName{
		font-size: 52rpx;
		font-weight: 600;
	}
	.stop{
		-webkit-animation-play-state: paused;
		animation-play-state: paused;
	}
	.play{
		/* animation-play-state:paused; */
	}
	@keyframes plays
	{
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
			
		}
	}
	.volume{
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		color: #333;
		font-size: 34rpx;
	}
	.volume view{
		display: flex;
		align-self: flex-end;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		height: 50rpx;
		background: #FFFFFF;
		margin: 10rpx 40rpx;
	}
	.active{
		background: #CCCCCC !important;
	}
	.c{
		color: red !important;
	}
</style>
